App.require(["htmlTool"], function (htmlTool) {
    var app = App.getCurrent();

    app.defineComponent("str-pagination", {
        render: function (next) {
            this.computeData();
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            });
        },
        computeData: function () {
            var property = this.property;
            property.class = property.class || "";
            property.page = parseInt(property.page || 1);
            this.data.list = htmlTool.getOptions(this.slot);
            property.size = parseInt(property.size || 
                (this.data.list.length > 0 ?this.data.list[0].value : 10));
            this.setPage(property);
            property.pageseperate = property.pageseperate || "-";
            property.total = property.total || "0";
            this.data.propertystr = this.createPropertyStr({
                class: property.class
            })
        },
        setPage: function (property, isUpdateDom) {
            property.start = property.size * (property.page - 1) + 1;
            var end = property.size * property.page
            property.end = end > property.total ? property.total : end;
            if (isUpdateDom) {
                this.domList.pagestart.textContent = property.start;
                this.domList.pageend.textContent = property.end;
            }
        },
        getDomObj: function () {
            this.attachDom(".str-btn-group", "btnGroup")
                .attachEvent("btnGroup", "iconclick", this.iconClickHandler, false)
                .attachDom(".str-pagination-size", "sizeContainer")
                .attachDom(".pagination-start", "pagestart")
                .attachDom(".pagination-end", "pageend")
                .attachDom(".pagination-total", "pagetotal")
                .attachDom(".str-pagination-range", "range")
                .attachDom('[role="pagination"]', "container")
                .attachDom("select", "select")
                .attachEvent("sizeContainer", "change", this.sizeChangeHandler, false);
        },
        iconClickHandler: function (ev) {
            var component = ev.detail.component, node = component.nodes[0];
            if (!node.classList.contains("disabled")) {
                var action = component.dataset.action;
                this.dispatchCustomEvent("paginationiconclick", {
                    action: action,
                    component: this,
                    icon: component
                })
            }
        },
        sizeChangeHandler: function (ev) {
            this.dispatchCustomEvent("paginationsizechange", {
                value: ev.target.value,
                component: this
            })
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class === value) return;
            this.domList.container.className = value;
            this.property.class = value;
        },
        get page() {
            return this.property.page;
        },
        set page(val) {
            var property = this.property, max = Math.ceil(property.total / property.size);
            if (property.page != val && val <= max && val > 0) {
                property.page = val;
                this.setPage(property, true);
                this.changePage(val, max);
            }
        },
        get size() {
            return this.property.size;
        },
        set size(val) {
            var property = this.property;
            if (property.size !== val && val > 0) {
                property.size = val;
                var page = Math.ceil(property.total / property.size);
                if (property.page > page) {
                    property.page = page;
                }
                this.setPage(property, true);
                this.changePage(property.page, page);
            }
        },
        get pageseperate() {
            return this.property.pageseperate;
        },
        set pageseperate(val) {
            if (this.property.pageseperate !== val) {
                this.property.pageseperate = val;
                this.domList.range.childNodes[2].nodeValue = val;
            }
        },
        get total() {
            return this.property.total;
        },
        set total(val) {
            var property = this.property;
            if (property.total !== val && val > 0) {
                property.total = val;
                var page = Math.ceil(property.total / property.size);
                if (property.page > page) {
                    property.page = page;
                }
                this.setPage(property, true);
                this.changePage(property.page, page);
            }
        },
        changePage: function (current, max) {
            var iconComponents = this.getComponentsByTagName("str-icon");
            if (current == 1 && current == max) {
                iconComponents[0].className = iconComponents[1].className = iconComponents[2].className = iconComponents[3].className = "ripple disabled";
                return;
            }
            if (current == max) {
                iconComponents[2].className = iconComponents[3].className = "ripple disabled";
                iconComponents[0].className = iconComponents[1].className = "ripple";
                return;
            }
            if (current == 1) {
                iconComponents[0].className = iconComponents[1].className = "ripple disabled";
                iconComponents[2].className = iconComponents[3].className = "ripple";
                return;
            }
            iconComponents[0].className = iconComponents[1].className = iconComponents[2].className = iconComponents[3].className = "ripple";
        },
        filter: {
            firstpage: function (page) {
                if (page == 1) return "disabled";
                return "";
            },
            lastpage: function (page) {
                var property = this.property;
                if (page == Math.ceil(property.total / property.size)) return "disabled";
                return "";
            },
        }
    })
})